<template>
	<view class="pages" :class="themeName">
		<view class="forget-pwd">
			<view class="input-container">
				<view class="input">
					<u-field label-width="160" label="手机号" v-model="ferget.mobile" placeholder="请输入手机号"
						:input-border="false" />
				</view>
				<view class="input">
					<u-field label-width="160" label="短信验证码" v-model="ferget.code" placeholder="请输入验证码"
						:input-border="false">
						<view slot="right">
							<view class="sms-btn" @tap="sendSMS">
								<!-- 获取验证码 -->
								<u-verification-code unique-key="login" ref="uCode" @change="codeChange">
								</u-verification-code>
								<view class="xs">{{codeTips}}</view>
							</view>
						</view>
					</u-field>
				</view>
				<view class="input">
					<u-field label-width="160" label="设置密码" type="password" v-model="ferget.password"
						placeholder="请输入密码" :input-border="false" />
				</view>
				<view class="input">
					<u-field label-width="160" label="确认密码" type="password" v-model="ferget.password_confirm"
						placeholder="请确认密码" :input-border="false" />
				</view>
			</view>
			<button class="btn white br60" size="lg" @tap="fergetFun">确 认</button>
		</view>
	</view>
</template>

<script>
	import {
		apiResetPasswordCaptcha,
		apiResetPassword
	} from '@/api/app'
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				ferget: {
					mobile: '',
					code: '',
					password: '',
					password_confirm: "",
				},
				codeTips: ''
			}
		},
		methods: {
			codeChange(tip) {
				this.codeTips = tip
			},
			fergetFun() {
				let {
					mobile,
					password,
					code,
					password_confirm
				} = this.ferget;
				if (!mobile) {
					this.$toast({
						title: '请输入手机号'
					});
					return;
				}
				if (!code) {
					this.$toast({
						title: '请输入验证码'
					});
					return;
				}
				if (!password) {
					this.$toast({
						title: "请输入密码"
					})
					return;
				}
				if (!password) {
					this.$toast({
						title: "请再次输入密码"
					})
					return;
				}
				if (password != password_confirm) {
					this.$toast({
						title: "两次密码输入不一致"
					})
					return;
				}
				apiResetPassword({
					mobile,
					password,
					code,
				}).then(res => {
					setTimeout(() => {
						this.$Router.back(1)
					}, 1500)
				})
			},
			sendSMS() {
				if (!this.$refs.uCode.canGetCode) return
				if (!this.ferget.mobile) {
					this.$toast({
						title: '请输入手机号'
					})
					return;
				}
				apiResetPasswordCaptcha({
					mobile: this.ferget.mobile
				}).then(res => {
					this.$refs.uCode.start();
				})
			}
		},
		computed: {
			...mapGetters(['appConfig'])
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.forget-pwd {
		padding: 40rpx 30rpx 0;

		.input {
			padding-top: 20rpx;
		}

		.sms-btn {
			text-align: center;
			border: 1px solid;
			width: 176rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 60rpx;
			@include font_color();
			@include border_color();
		}

		.btn {
			margin-top: 60rpx;
			@include background_color();
		}
	}
</style>
